<template>
	<Layui  background="#ffffff" :isFixedHead="false" :headShow="false" :HeadBarData="HeadBarData">
		<view class="loginBox">
			<view class="TopBox">
				<view class="titleBox" style="font-family: fangsong;">
					<text class="titleBox-biaoti">小太阳的登入页</text>
					<text class="titleBox-title">WELCOME </text>
				</view>
			</view>
			<view class="CenterBox">
				<view class="input">
					<view class="imageBox">
						<image src="@/static/img/login/username.jpg"></image>
					</view>
					<FuiInput color="#333" :disabled="false" :borderBottom="false" :inputBorder="false" v-model="searchObj.username" :size="30" :padding="['20rpx','5rpx','20rpx','5rpx']" placeholder="用户名">
						<slot>
						</slot>
					</FuiInput>
				</view>
				<view class="input">
					<view class="imageBox">
						<image src="@/static/img/login/password.jpg"></image>
					</view>
					<FuiInput :password="true" color="#333" :disabled="false" :borderBottom="false" :inputBorder="false" v-model="searchObj.password" :size="30" :padding="['20rpx','5rpx','20rpx','5rpx']" placeholder="用户密码">
						<slot>
						</slot>
					</FuiInput>
				</view>
				<view class="input">
					<view class="imageBox">
						<image src="@/static/img/login/yzm.png"></image>
					</view>
					<FuiInput color="#333" :disabled="false" :borderBottom="false" :inputBorder="false" v-model="searchObj.code" :size="30" :padding="['20rpx','5rpx','20rpx','5rpx']" placeholder="验证码">
						<slot>
							<view class="yzm">
								<image @click="getCode" :src="codeUrl"></image>
							</view>
						</slot>
					</FuiInput>
				</view>
				
			</view>
			<view class="BottomBox">
				<view></view>
				<view @click="login()" class="isLoginBox">
					<image src="@/static/Headbar/leftWhile.png"></image>
				</view>
			</view>
<!-- 			<view class="title flexAllCenter">
				<text class="fontSizeZhuBiaoTi">上饶党政智慧办公平台</text>
			</view>
			<view class="content">
				<view class="input">
					<FuiInput :disabled="false" borderColor="#333" :inputBorder="true" v-model="searchObj.username" :size="30" :padding="['10rpx','5rpx','10rpx','5rpx']" placeholder="用户名">
					</FuiInput>
				</view>
				<view class="input">
					<FuiInput :password="true" :disabled="false" borderColor="#333" :inputBorder="true" v-model="searchObj.password" :size="30" :padding="['10rpx','5rpx','10rpx','5rpx']" placeholder="密码">
					</FuiInput>
				</view>
				<view class="button">
					<FuiButton @click="login()" width="100%" :size="30" height="70rpx" text="登入"></FuiButton>
				</view>
			</view> -->
		</view>
	</Layui>
</template>

<script>
	import {loginApi,captchaImageApi} from "@/api/login/index.js"
	export default {
		data() {
			return {
				HeadBarData:{
					data:{title:"登入页",textColor:"#000",fontSize:"34rpx"},
					toReturn:false,BackColor:"#fff",imageUrl:"/static/Headbar/leftWhile.png",
					backgroundImage:"",
				},
				searchObj:{
					username:"",
					password:"",
					uuid:"",
					code:"",
				},
				//验证码开关
				captchaEnabled:true,
				codeUrl:""
			}
		},
		methods: {
			login(){
				loginApi(this.searchObj).then(res=>{
					if(res.code!=200){
						this.getCode()
					}else{//登入成功
					uni.setStorageSync('uniapp_token','Bearer ' + res.data.token)
						uni.navigateTo({
							url: `/pages/index/index`
						});
					}
				})
			},
			getCode(){
				captchaImageApi().then(res=>{
					this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
					if(this.captchaEnabled){
						 this.codeUrl = "data:image/gif;base64," + res.data.img;
						 this.searchObj.uuid = res.data.uuid;
					}
				})
			}
		},
		created() {
			uni.removeStorageSync('uniapp_token');
			this.getCode()
		}
	}
</script>

<style scoped lang="scss">
.loginBox{
	overflow-x: hidden;
	height: 100%;
	width: 100%;
	position: relative;
	.TopBox{
		width: 900%; // 宽度适当缩小以便看到弧形效果
		height: 800rpx; // 设置一个合适的高度
		background: #465CFF; // 背景色
		position: relative;
		left: 0%; // 左右居中
		top: 0rpx; // 距离顶部位置
		border-bottom-left-radius: 230%;
		border-bottom-right-radius: 90%;
		
		/* 不对称的border-radius实现斜角效果 */
		/* 左上 右上 右下 左下 */
		/* 这里右下角(100rpx)比左下角(50rpx)更大 */
		
		/* 可选：添加阴影增强立体感 */
		// box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);
		
		/* 或者使用clip-path实现更复杂的形状 */
		.titleBox{
			top:25%;
			position: absolute;
			left: 80rpx;
			display: flex;
			flex-direction: column;
			color:#fff;
			.titleBox-biaoti{
				letter-spacing: 2rpx;
				font-size: 60rpx;
			}
			.titleBox-title{
				letter-spacing: 1rpx;
				padding: 10rpx 5rpx;
				color: #CCCCCC;
				font-size: 35rpx;
			}
		}
	}
	.CenterBox{
		position: relative;
		z-index: 500;
		margin-top: -380rpx;
		padding: 0px 60rpx;
		display: flex;
		flex-direction: column;
		.input{
			display: flex;
			align-items: center;
			box-shadow:rgba(0, 0, 0, 0.3) 0px 2px 12px 0px;
			margin-bottom: 1.75rem;
			border-radius: 0.5rem;
			background-color: #fff;
			.imageBox{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 25rpx 20rpx;
				image{
					height: 40rpx;
					width: 35rpx;
				}
			}
		}
	}
	.BottomBox{
		display: flex;
		justify-content: space-between;
		padding: 0px 60rpx;
		position: absolute;
		height: 200rpx;
		left: 0px;
		bottom: 0%;
		width: calc(100% - 120rpx);
		.isLoginBox{
			// padding: 10rpx 10rpx;
			height: 100rpx;
			width: 100rpx;
			background-color: #465CFF;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				transform: rotate(180deg);
				height: 40rpx;
				width: 40rpx;
			}
		}
	}
	.yzm{
		padding-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			height: 50rpx;
			width: 200rpx;
		}
	}
}
.TopBox:before{
    background-color: #465CFF;
    content: "";
    width: 100%;
    height: 500px;
    left: 0%;
    top: 0px;
    border-bottom-left-radius: 400%;
    border-bottom-right-radius: 200%;
    position: absolute;
    border-bottom: 1px solid;
    box-shadow: rgba(70,92,255,0.6) 0px 0px 3px 0px;
}
</style>
